document 是整個 DOM tree 的根節點，所以我們要抓 html 的時候都是從 document 物件開始。

DOM 節點類型

• html 元素節點
• 文字節點
• 註解節點

而選取方式如下：

document.getElemenrById('//想要選取的元素') //根據 id
document.getElemenrByTagName('//想要選取的元素') //根據 tag 名子，回傳所有符合條件的集合
document.getElemenrByClassName('//想要選取的元素') //根據 class 名子，回傳所有符合條件的集合
document.querySelector('//想要選取的元素') 根據傳入的值，回傳第一個 NodeList
document.querySelectorAll('//想要選取的元素') 根據傳入的值，回傳所有符合條件的 NodeList

注意：Nodelist 物件是節點的集合，有跟陣列一樣的特性但是不是陣列。

DOM 節點之間的查找
DOM 節點有層的概念，可以分成兩種，如下：

• 父子關係：每個節點都會有個父層節點，屬於在父層節點之下的就是子層節點。
• 兄弟關係：在同一個父層節點之下的節點，他們彼此就是兄弟節點。

Node.childNodes：
DOM 節點物件都有 childNodes 屬性，我們可以透過這個屬性使用 Node.hasChildNodes() 來檢查 DOM 節點裡面是不是有子節點。這邊比較特別的是回傳是一個像是陣列的特殊物件，但不是陣列，所以只有陣列才有的方法，像是 forEach(), map() 這些都不能使用在 NodeList 物件上的。而回傳結果可能是下列三種：

• HTML 元素節點
• 文字節點(含空白)
• 註解節點

Node.firstChild：
可以找到 Node 節點第一個子節點，如果沒有的話就會回傳 null，而子節點也包含空白，結果如下：

<p>
    <span>span 1</span>
    <span>span 2</span>
    <span>span 3</span>
</p>

var p = document.querySelector('p')
console.log(p.firstChild.tagname) // undefined

因為這邊我們拿到的是換行字元，所以是 undefined。
可是我們如果成這樣的話就可以抓到我們想要的 span 標籤了

<p><span>span 1</span><span>span 2</span><span>span 3</span></p>

var p = document.querySelector('p')
console.log(p.firstChild.tagname) // span

明天我們會繼續介紹其他找節點的方式～～
我們明天見啦！